<template>
  <div class="mod-config">
    <basic-container>
      <el-form :inline="true" :model="dataForm">
        <el-form-item>
          <el-button v-if="permissions.sys_role_add" icon="el-icon-plus" type="primary" @click="addOrUpdateHandle('add','')">新增</el-button>
        </el-form-item>
      </el-form>

      <div class="avue-crud">
        <el-table :data="dataList" height="calc(100vh - 215px)" border v-loading="dataListLoading">
          <el-table-column prop="roleName" header-align="center" align="center" label="角色名称" width="150"></el-table-column>
          <el-table-column prop="roleCode" header-align="center" align="center" label="角色标识" width="150"></el-table-column>
          <el-table-column prop="roleDesc" header-align="center" align="center" label="角色描述" min-width="240"></el-table-column>
          <el-table-column prop="dsType" header-align="center" align="center" label="数据权限" width="150">
            <template slot-scope="scope">
              {{changeFormat(scope.row.dsType)}}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" header-align="center" align="center" label="创建时间" width="180"></el-table-column>
          <el-table-column header-align="center" align="center" label="操作" min-width="270">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-plus" @click="allocationOrg(scope.row)">组织</el-button>
              <el-button type="text" icon="el-icon-edit" @click="addOrUpdateHandle('check',scope.row.roleId)">查看</el-button>
              <el-button v-if="permissions.sys_role_edit" type="text" icon="el-icon-edit" @click="addOrUpdateHandle('update',scope.row.roleId)">修改</el-button>
              <el-button v-if="permissions.sys_role_del" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.roleId)">删除</el-button>
              <el-button v-if="permissions.sys_role_perm" type="text" icon="el-icon-plus" @click="allocationPower(scope.row)">权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
      <!-- 弹窗，分配权限 -->
      <power v-if="powerVisible" ref="powerDialog"></power>
      <!-- 弹窗，分配组织 -->
      <org v-if="orgVisible" ref="orgDialog"></org>
    </basic-container>
  </div>
</template>

<script>
  import { remote } from '@/api/admin/dict'
  import { addObj, delObj, fetchList, fetchRoleTree, permissionUpd, putObj } from '@/api/admin/role'

  import { fetchMenuTree } from '@/api/admin/menu'

  import {mapGetters} from 'vuex'

  import TableForm from './form'
  import power from './power'
  import org from './org'

  export default {
    data () {
      return {
        dataForm: {},
        supplyOptions: [],
        dsTypeOption: [],
        dataList: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        powerVisible: false,
        orgVisible: false
      }
    },
    components: {
      TableForm,
      power,
      org
    },
    created () {
      this.getDataList()
      remote('ds_type').then(result => {
        this.dsTypeOption = result.data.data
      })
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        fetchList(Object.assign({ current: this.pageIndex, size: this.pageSize })).then(response => {
          this.dataList = response.data.data.records
          this.totalPage = response.data.data.total
          this.dataListLoading = false
        }).catch(() => {
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 新增 / 修改
      addOrUpdateHandle(type,id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(type,id)
        })
      },
      // 删除
      deleteHandle (id) {
        this.$confirm('是否确认删除ID为' + id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return delObj(id)
        }).then(data => {
          this.$message.success('删除成功')
          this.getDataList()
        })
      },
      // 分配权限
      allocationPower(row){
        this.powerVisible = true
        this.$nextTick(() => {
          this.$refs.powerDialog.init(row)
        })
      },
      // 分配组织
      allocationOrg(row){
          this.orgVisible = true
          this.$nextTick(() => {
              this.$refs.orgDialog.init(row)
          })
      },
      // 格式转换
      changeFormat(val){
        let obj = {}
        obj = this.dsTypeOption.find(item => {
          if(item.value == val){
            return item
          }
        })
        if(obj && obj.label){
          return obj.label
        }
      }
    }
  }
</script>
